<template>
  <div>
    <div class="relative pt-40px pb-40px" @click.left="addSetp" @click.middle="midSetp">
      <div class="arrowTop" :style="{ transform: `translateX(${setpArr[step]?.oldStartArror}px)` }">
        <span class="text-14px">oldStart</span>
      </div>
      <div
        class="arrowBottom"
        :style="{ transform: `translateX(${setpArr[step]?.newStartArrow}px)` }"
      >
        <span class="text-14px">newStart</span>
      </div>
      <div class="arrowTop" :style="{ transform: `translateX(${setpArr[step]?.oldEndArrow}px)` }">
        <span class="text-14px">oldEnd</span>
      </div>
      <div
        class="arrowBottom"
        :style="{ transform: `translateX(${setpArr[step]?.newEndArrow}px)` }"
      >
        <span class="text-14px">newEnd</span>
      </div>
      <div class="flex gap-x-12">
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domD}px)` }"
        >
          <span @click="addres" class="text-white text-70px">D</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domB}px)` }"
        >
          <span class="text-white text-70px">B</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domC}px)` }"
        >
          <span class="text-white text-70px">C</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domA}px)` }"
        >
          <span class="text-white text-70px">A</span>
        </div>
        <div
          v-if="setpArr[step]?.id >= 4"
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domE}px)` }"
        >
          <span @click="addres" class="text-white text-70px">E</span>
        </div>
        <div
          v-if="setpArr[step]?.id >= 8"
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center dom_main"
          :style="{ transform: `translateX(${setpArr[step]?.domF}px)` }"
        >
          <span @click="addres" class="text-white text-70px">F</span>
        </div>
      </div>
      <div class="flex gap-x-12">
        <div class="w-100px text-center">[0]</div>
        <div class="w-100px text-center">[1]</div>
        <div class="w-100px text-center">[2]</div>
        <div class="w-100px text-center">[3]</div>
        <div class="w-100px text-center" v-if="setpArr[step]?.id >= 3 && setpArr[step]?.id < 8">[4]</div>
        <div class="w-100px text-center" v-if="setpArr[step]?.id >= 7 && setpArr[step]?.id < 8">[5]</div>
      </div>
      <div class="flex gap-x-12 mt-8">
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">A</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">E</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">B</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">F</span>
        </div>
      </div>
      <div class="flex gap-x-12">
        <div class="w-100px text-center">[0]</div>
        <div class="w-100px text-center">[1]</div>
        <div class="w-100px text-center">[2]</div>
        <div class="w-100px text-center">[3]</div>
      </div>
    </div>
    <div class="leading-5 text-10px">oldStart = newEnd，将oldStart对应的dom移动到oldEnd对应的dom之后，指针中移</div>
    <div class="leading-5 text-10px">oldEnd = newStart，将oldEnd对应的dom移动到oldStart对应的dom之前，指针中移</div>
    <div class="leading-5 text-10px">四种预判匹配均不成功，遍历oldChild，newStart节点找对应的匹配</div>
    <div class="leading-5 text-10px">成功：移动到oldStart之前，指针中移</div>
    <div class="leading-5 text-10px">失败：创建新dom，移动到oldStart之前，指针中移</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 当前步数
let step = ref(0)

// 第一步各个位置
const setpArr = reactive(
  [
    {
      id: 0,
      oldStartArror: 30,
      oldEndArrow: 473,
      newStartArrow: 30,
      newEndArrow: 473,
      domA: 0,
      domB: 0,
      domC: 0,
      domD: 0
    },
    {
      id: 1,
      oldStartArror: 177,
      oldEndArrow: 473,
      newStartArrow: 30,
      newEndArrow: 473,
      domA: -444,
      domB: 148,
      domC: 148,
      domD: 148
    },
    {
      id: 2,
      oldStartArror: 177,
      oldEndArrow: 473,
      newStartArrow: 177,
      newEndArrow: 473,
      domA: -444,
      domB: 148,
      domC: 148,
      domD: 148
    },
    {
      id: 3,
      oldStartArror: 327,
      oldEndArrow: 624,
      newStartArrow: 177,
      newEndArrow: 473,
      domA: -444,
      domB: 296,
      domC: 296,
      domD: 296
    },
    {
      id: 4,
      oldStartArror: 327,
      oldEndArrow: 624,
      newStartArrow: 177,
      newEndArrow: 473,
      domA: -444,
      domB: 296,
      domC: 296,
      domD: 296,
      domE: -444
    },
    {
      id: 5,
      oldStartArror: 327,
      oldEndArrow: 624,
      newStartArrow: 326,
      newEndArrow: 473,
      domA: -444,
      domB: 296,
      domC: 296,
      domD: 296,
      domE: -444
    },
    {
      id: 6,
      oldStartArror: 473,
      oldEndArrow: 624,
      newStartArrow: 473,
      newEndArrow: 473,
      domA: -444,
      domB: 148,
      domC: 296,
      domD: 444,
      domE: -444
    },
    {
      id: 7,
      oldStartArror: 624,
      oldEndArrow: 771,
      newStartArrow: 473,
      newEndArrow: 473,
      domA: -444,
      domB: 148,
      domC: 444,
      domD: 592,
      domE: -444
    },
    {
      id: 8,
      oldStartArror: 624,
      oldEndArrow: 771,
      newStartArrow: 473,
      newEndArrow: 473,
      domA: -444,
      domB: 148,
      domC: 444,
      domD: 592,
      domE: -444,
      domF: -296
    }
  ]
)


// 鼠标左键，增加步数
const addSetp = () => {
  step.value++
  step.value > 8 && step.value--
}
// 鼠标中键，减少步数
const midSetp = () => {
  step.value > 0 && step.value--
}
</script>  

<style scoped>
.arrowTop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: red transparent transparent transparent;
  transition: all 0.3s ease;
}
.arrowBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: transparent transparent red transparent;
  transition: all 0.3s ease;
}
.dom_main {
  transition: all 0.5s ease;
}
</style>